<!DOCTYPE html>
<html>
<head>
    <#include "../common/meta-headerv2.ftl"/>
    <style>
        .banner{max-height:650px;display:block;width:95%;max-width:650px;margin-left:auto;margin-right:auto;margin-bottom:20px}
        .banner .turnplate{display:block;width:100%;position:relative}
        .banner .turnplate canvas.item{width:100%}
        .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%}

    </style>
</head>
<body>
   <#include "../common/headerv2.ftl"/>

 <#include "../common/newsv2.ftl"/>


<div class="container maincontainer "  >
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-8 pt-1 subLeftContainer" style=""  >
            <div class="container">
                <div class="row title">
                    <h3>大转盘</h3>
                </div>
                <div class="row">

                    <img src="/dazhuanpan/1.png" id="shan-img" style="display:none;" />
                    <img src="dazhuanpan/2.png" id="sorry-img" style="display:none;" />
                    <div class="banner">
                        <div class="turnplate" style="background-image:url(/dazhuanpan/turnplate-bg.png);background-size:100% 100%;">
                            <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                            <img class="pointer" src="/dazhuanpan/turnplate-pointer.png" />
                        </div>
                    </div>
                </div>

            </div>
        </div><!--主内容体结束 -->

        <div class="col-xs-6 col-sm-6 col-md-4 pt-1">
              <#include "../common/right-guanggaov2.ftl"/>

        </div>
    </div>
</div>
 <#include "../common/footerv2.ftl"/>
</body>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="/static/jslib/jquery.js"><\/script>')</script>
<#--<script src="/jslib/bootstrap-waterfall/js/bootstrap-waterfall.js"></script>-->
<script src="/jslib/flickity/flickity.pkgd.js"></script>
<script src="/jslib/vslidev2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="/bootstrap-4.5.2-dist/js/bootstrap.min.js"   crossorigin="anonymous"></script>

<script src="/dazhuanpan/awardRotate.js"></script>
<script>
    <#if (recomentNewsList)??  && (recomentNewsList?size>=1)>
                var liHeight = $("#ulContent div").first().height();

                <!--调用插件-->
                $('#ulContent').lSlide({nTop:liHeight});
    </#if>

    $(document).ready(function () {



        <#if (recomentList)??>
            <#if (recomentList?size>=1)>
                <#list recomentList as recomentObj>
                    <#if (recomentObj??&& recomentObj.dataList ??&& recomentObj.dataList?size>=1)>

                     render1("#${recomentObj.fromsite}");

                    </#if>

                </#list>
            </#if>
        </#if>

            <#if (recomentMovList)??>
                <#if (recomentMovList?size>=1)>

             render1("#recomentMovListId");

                </#if>
            </#if>
    });
    function render1(id){
        return new Flickity( id, {
            // 选项，默认值列表

            accessibility: true,
            // 启用键盘导航，按左右键

            adaptiveHeight: false,
            // 将幻灯片/轮播高度设置为所选的幻灯片

            autoPlay: 10000,
            // 跳转到下一个单元格
            // 如果为 true, 默认间隔3秒
            // 或以毫秒为单位设置间隔时间
            // 例如 `autoPlay: 1000` 间隔为1秒

            cellAlign: 'center',
            // 对齐，“中心”，“左”或“右”
            // 或小数点0-1,0是容器的开始（左），1是结束（右）

            cellSelector: undefined,
            // 指定单元格元素的选择器

            contain: false,
            // 将包含单元格到容器
            // 所以在开始或结束时没有多余的滚动
            // 如果启用了 wrapAround ，则不起作用

            draggable: true,
            // 启用拖动和触摸

            dragThreshold: 3,
            // 用户必须水平滚动才能开始拖动的像素数
            // 增加触摸设备的垂直滚动空间

            freeScroll: false,
            // 使内容可以自由滚动和弹出
            // 不调整单元格

            friction: 0.2,
            // 较小的数字=更容易滑动

            groupCells: false,
            // 将组包含在幻灯片中

            initialIndex: 0,
            // 初始选定单元的基于0的索引

            lazyLoad: true,
            // 启用延迟加载图像
            // 设置图像 data-flickity-lazyload="src.jpg"
            // 设置为加载相邻单元格的图像

            percentPosition: true,
            // 以百分比值而不是像素设置定位
            // 如果项目具有百分比宽度，则启用
            // 如果项目具有像素宽度（如图像）则禁用

            prevNextButtons: true,
            // 创建并启用按钮以点击上一个和下一个单元格

            pageDots: true,
            // 创建并启用页面点

            resize: true,
            // 监听窗口调整大小事件，以调整大小和位置

            rightToLeft: false,
            // 实现从右到左的布局

            setGallerySize: true,
            // 设置画廊的高度
            // 如果图库已经使用CSS设置了高度，则禁用它

            watchCSS: false,
            // 观看内容：之后的元素
            // 如果激活 #element:after { content: 'flickity' }

            wrapAround: true
            // 在滑动结束时，首先使用无限滚动

        });
    }
</script>
<script type="text/javascript">
    var turnplate={
        restaraunts:[],				//大转盘奖品名称
        colors:[],					//大转盘奖品区块对应背景颜色
        outsideRadius:192,			//大转盘外圆的半径
        textRadius:155,				//大转盘奖品位置距离圆心的距离
        insideRadius:68,			//大转盘内圆的半径
        startAngle:0,				//开始角度
        bRotate:false				//false:停止;ture:旋转
    };

    $(document).ready(function(){
        //动态添加大转盘的奖品与奖品区域背景颜色
        turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"];
        turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];


        var rotateTimeOut = function (){
            $('#wheelcanvas').rotate({
                angle:0,
                animateTo:2160,
                duration:8000,
                callback:function (){
                    alert('网络超时，请检查您的网络设置！');
                }
            });
        };

        //旋转转盘 item:奖品位置; txt：提示语;
        var rotateFn = function (item, txt){
            var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
            if(angles<270){
                angles = 270 - angles;
            }else{
                angles = 360 - angles + 270;
            }
            $('#wheelcanvas').stopRotate();
            $('#wheelcanvas').rotate({
                angle:0,
                animateTo:angles+1800,
                duration:8000,
                callback:function (){

                    var arry = ["白云边20年45度", "关公坊红运", "黄鹤楼15年42度", "国宝桥米", "陈克明高筋宽带挂面", "金沙河麦芯龙须挂面", "雪花勇闯天涯听装", "康师傅冰红茶(柠檬味)", "脉动（芒果味）","奥星双低农家小榨","金龙鱼调和油","中昌非转基因食用调和油"];

                    for (var i = arry.length - 1; i >= 0; i--) {
                        if (arry[i].indexOf(txt) >= 0) {
                            alert(arry[i])

                        }
                    }
                    turnplate.bRotate = !turnplate.bRotate;
                }
            });
        };

        $('.pointer').click(function (){
            if(turnplate.bRotate)return;
            turnplate.bRotate = !turnplate.bRotate;
            //获取随机数(奖品个数范围内)
            var item = rnd(1,turnplate.restaraunts.length);
            //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
            rotateFn(item, turnplate.restaraunts[item-1]);
            /* switch (item) {
                case 1:
                    rotateFn(252, turnplate.restaraunts[0]);
                    break;
                case 2:
                    rotateFn(216, turnplate.restaraunts[1]);
                    break;
                case 3:
                    rotateFn(180, turnplate.restaraunts[2]);
                    break;
                case 4:
                    rotateFn(144, turnplate.restaraunts[3]);
                    break;
                case 5:
                    rotateFn(108, turnplate.restaraunts[4]);
                    break;
                case 6:
                    rotateFn(72, turnplate.restaraunts[5]);
                    break;
                case 7:
                    rotateFn(36, turnplate.restaraunts[6]);
                    break;
                case 8:
                    rotateFn(360, turnplate.restaraunts[7]);
                    break;
                case 9:
                    rotateFn(324, turnplate.restaraunts[8]);
                    break;
                case 10:
                    rotateFn(288, turnplate.restaraunts[9]);
                    break;
            } */
            console.log(item);
        });
    });

    //控制中奖结果
    function rnd(n, m){
        var random = 11;
        //var random = Math.floor(Math.random()*(m-n+1)+n);
        return random;

    }


    //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
    window.onload=function(){
        drawRouletteWheel();
    };

    function drawRouletteWheel() {
        var canvas = document.getElementById("wheelcanvas");
        if (canvas.getContext) {
            //根据奖品个数计算圆周角度
            var arc = Math.PI / (turnplate.restaraunts.length/2);
            var ctx = canvas.getContext("2d");
            //在给定矩形内清空一个矩形
            ctx.clearRect(0,0,422,422);
            //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
            ctx.strokeStyle = "#FFBE04";
            //font 属性设置或返回画布上文本内容的当前字体属性
            ctx.font = '16px Microsoft YaHei';
            for(var i = 0; i < turnplate.restaraunts.length; i++) {
                var angle = turnplate.startAngle + i * arc;
                ctx.fillStyle = turnplate.colors[i];
                ctx.beginPath();
                //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
                ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                //锁画布(为了保存之前的画布状态)
                ctx.save();

                //----绘制奖品开始----
                ctx.fillStyle = "#E5302F";
                var text = turnplate.restaraunts[i];
                var line_height = 17;
                //translate方法重新映射画布上的 (0,0) 位置
                ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                //rotate方法旋转当前的绘图
                ctx.rotate(angle + arc / 2 + Math.PI / 2);

                /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                if(text.indexOf("M")>0){//流量包
                    var texts = text.split("M");
                    for(var j = 0; j<texts.length; j++){
                        ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
                        if(j == 0){
                            ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
                        }else{
                            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                        }
                    }
                }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围
                    text = text.substring(0,6)+"||"+text.substring(6);
                    var texts = text.split("||");
                    for(var j = 0; j<texts.length; j++){
                        ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                    }
                }else{
                    //在画布上绘制填色的文本。文本的默认颜色是黑色
                    //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                }

                //添加对应图标
                if(text.indexOf("闪币")>0){
                    var img= document.getElementById("shan-img");
                    img.onload=function(){
                        ctx.drawImage(img,-15,10);
                    };
                    ctx.drawImage(img,-15,10);
                }else if(text.indexOf("谢谢参与")>=0){
                    var img= document.getElementById("sorry-img");
                    img.onload=function(){
                        ctx.drawImage(img,-15,10);
                    };
                    ctx.drawImage(img,-15,10);
                }
                //把当前画布返回（调整）到上一个save()状态之前
                ctx.restore();
                //----绘制奖品结束----
            }
        }
    }

</script>
</html>
